<template>
  <el-drawer
    size="90%"
    v-model="dialogVisibled"
    :before-close="handleClose"
    :title="dialogTitle"
    :close-on-click-modal="false"
    @open="handleDialogOpen"
  >
    <el-divider />
    <v-form-render
      :form-json="formJson"
      ref="vfDesigner"
      style="padding: 10px"
      :key="updateKey"
    >
    </v-form-render>
    <template #footer>
      <el-button icon="Close" size="large" type="danger" plain @click="handleClose"
        >取消</el-button
      >
    </template>
  </el-drawer>
</template>
<script lang="ts" setup>
import { GetFormByFormId } from "@/api/form";
import { computed, nextTick, onMounted, ref } from "vue";
const props = defineProps({
  isVisibles: Boolean,
  dialogTitle: String,
  formId: { type: String, required: true },
});
const emit = defineEmits(["closeBnt", "closePreBnt"]);

//初始加载dom
onMounted(() => {});
const formJson = ref<any>();
//表单ref
const vfDesigner = ref();
const updateKey = ref(0);

//获取当前表单信息
const getFormByFormId = function (formId: string) {
  GetFormByFormId({ formId: formId }).then(({ data, code }) => {
    if (code == 200) {
      nextTick(() => {
        formJson.value = JSON.parse(data.FormJson);
        updateKey.value++;
      });
    }
  });
};

//打开时加载
const handleDialogOpen = function () {
  updateKey.value = 0;
  formJson.value = [];
  getFormByFormId(props.formId);
};

//是否显示dialog
const dialogVisibled = computed(() => {
  return props.isVisibles;
});
//关闭事件
const handleClose = () => {
  emit("closePreBnt");
};
</script>
